<template>
    <div class="app-container">
        <div class="filter-container">
            <el-input v-model="listQuery.orderNo" placeholder="订单编号" style="width: 200px;" class="filter-item"
                @keyup.enter.native="handleFilter" />
            <el-input v-model="listQuery.receiverName" placeholder="收货人" style="width: 150px;" class="filter-item"
                @keyup.enter.native="handleFilter" />
            <el-input v-model="listQuery.receiverPhone" placeholder="联系电话" style="width: 150px;" class="filter-item"
                @keyup.enter.native="handleFilter" />
            <el-select v-model="listQuery.status" placeholder="状态" clearable style="width: 100px" class="filter-item">
                <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-date-picker v-model="listQuery.dateRange" type="daterange" align="right" unlink-panels
                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"
                value-format="yyyy-MM-dd" style="width: 250px;" class="filter-item" />
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
                搜索
            </el-button>
        </div>

        <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%;">
            <el-table-column label="ID" prop="id" align="center" width="80">
                <template slot-scope="{row}">
                    <span>{{ row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column label="订单编号" min-width="180">
                <template slot-scope="{row}">
                    <span>{{ row.orderNo }}</span>
                </template>
            </el-table-column>
            <el-table-column label="商品信息" min-width="200">
                <template slot-scope="{row}">

                    <span>{{ row.goods.name }} × {{ row.goodsNum }}</span>

                </template>
            </el-table-column>
            <el-table-column label="消耗积分" width="100" align="center">
                <template slot-scope="{row}">
                    <span>{{ row.totalPoints }}</span>
                </template>
            </el-table-column>
            <el-table-column label="收货信息" min-width="250">
                <template slot-scope="{row}">
                    <div>
                        <span>收货人: {{ row.receiverName }}</span>
                    </div>
                    <div>
                        <span>电话: {{ row.receiverPhone }}</span>
                    </div>
                    <div>
                        <span>地址: {{ row.receiverAddress }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="物流信息" min-width="200">
                <template slot-scope="{row}">
                    <div v-if="row.deliveryName">
                        <span>快递公司: {{ row.deliveryName }}</span>
                    </div>
                    <div v-if="row.deliveryCode">
                        <span>快递单号: {{ row.deliveryCode }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="状态" class-name="status-col" width="100">
                <template slot-scope="{row}">
                    <el-tag :type="row.status | statusFilter">
                        {{ row.status | statusText }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" width="160" align="center">
                <template slot-scope="{row}">
                    <span>{{ row.createTime }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
                <template slot-scope="{row}">
                    <el-button type="primary" size="mini" @click="handleDetail(row)">
                        详情
                    </el-button>
                    <el-button v-if="row.status === 0" size="mini" type="success" @click="handleShip(row)">
                        发货
                    </el-button>
                    <el-button v-if="row.status === 1" size="mini" type="success" @click="handlerReceiveOrder(row.id)">
                        收货
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

        <order-detail ref="detail" :order="currentData" :dialog-visible="detailVisible"
            @close="detailVisible = false" />
        <el-dialog title="发货操作" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="快递公司" :label-width="'120px'">
                    <el-input v-model="form.deliveryName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="快递单号" :label-width="'120px'">
                    <el-input v-model="form.deliveryCode" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleShipOk()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { fetchOrderList, shipOrder, receiveOrder } from '@/api/points/order'
import OrderDetail from './Detail'

export default {
    name: 'OrderList',
    components: { OrderDetail },
    filters: {
        statusFilter (status) {
            const statusMap = {
                0: 'info',
                1: '',
                2: 'success',
                3: 'danger'
            }
            return statusMap[status]
        },
        statusText (status) {
            const statusTextMap = {
                0: '待处理',
                1: '已发货',
                2: '已完成',
                3: '已取消'
            }
            return statusTextMap[status]
        }
    },
    data () {
        return {
            list: null,
            total: 0,
            listLoading: true,
            listQuery: {
                page: 1,
                limit: 20,
                orderNo: undefined,
                receiverName: undefined,
                receiverPhone: undefined,
                status: undefined,
                dateRange: []
            },
            statusOptions: [
                { label: '待处理', value: 0 },
                { label: '已发货', value: 1 },
                { label: '已完成', value: 2 },
                { label: '已取消', value: 3 }
            ],
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick (picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                        picker.$emit('pick', [start, end])
                    }
                }, {
                    text: '最近一个月',
                    onClick (picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                        picker.$emit('pick', [start, end])
                    }
                }, {
                    text: '最近三个月',
                    onClick (picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                        picker.$emit('pick', [start, end])
                    }
                }]
            },
            detailVisible: false,
            currentData: {
                orderNo: '',
                goods: {},
                receiverName: '',
                receiverPhone: '',
                receiverAddress: '',
                deliveryName: '',
                deliveryCode: '',
                remark: '',
                totalPoints: 0,
                status: 0,
                createTime: ''
            },
            form: {
                id: '',
                deliveryCode: '',
                deliveryName: ''
            },
            dialogFormVisible: false
        }
    },
    created () {
        this.getList()
    },
    methods: {
        getList () {
            this.listLoading = true
            fetchOrderList(this.listQuery).then(({ data }) => {
                this.list = data.data.records
                this.total = data.data.total
                this.listLoading = false
            })
        },
        handleFilter () {
            this.listQuery.page = 1
            this.getList()
        },
        handleDetail (row) {
            // this.$refs.detail.setOrder(row)
            this.currentData = row;
            this.detailVisible = true
        },
        handleShip (row) {
            this.dialogFormVisible = true;
            this.form.id = row.id;
            this.form.deliveryCode = row.deliveryCode;
            this.form.deliveryName = row.deliveryName;
        },
        handleShipOk () {
            shipOrder(this.form).then(() => {
                this.$message({
                    type: 'success',
                    message: '发货成功'
                })
                this.dialogFormVisible = false;
                this.form = {
                    id: '',
                    deliveryCode: '',
                    deliveryName: ''
                }
                this.getList()
            })
        },
        handlerReceiveOrder (id) {
            this.$confirm('确认收货吗？', "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(res => {
                receiveOrder({ id: id }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '收货成功'
                    })
                    this.getList()
                })
            })
        }
    }
}
</script>